<template>
  <div class="app-container">
    <div class="filter-container" style="display: flex">
      <el-form ref="editForm" :rules="editFormRules" :model="editForm" status-icon label-position="right"
               label-width="100px" style="display: flex">
        <el-form-item label="账户号" prop="account" style="width: 400px">
          <!--<el-input v-model="editForm.account" placeholder="账户号"/>-->
          <el-select v-model="editForm.account" placeholder="请选择" style="width: 260px">
            <el-option
              v-for="item in accounts"
              :key="item.account"
              :label="item.account"
              :value="item.account"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起始日期" prop="startDate">
          <el-date-picker
            v-model="editForm.startDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="endDate">
          <el-date-picker
            v-model="editForm.endDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="收付方向" style="width: 250px">
          <el-radio-group v-model="editForm.payRecv">
            <el-radio label="0">收款</el-radio>
            <el-radio label="1">付款</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div style="margin-left: 30px">
        <el-button type="primary" @click="doQuery" icon="el-icon-search">查询</el-button>
      </div>
    </div>
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
              :header-cell-style="{background:'#92D3FF',color:'#fff'}">
      <span style="text-align: left;display: inline-block;width: 100%;margin-left: -15%;" slot="empty">暂无数据</span>
      <!--<el-table-column fixed align="center" min-width="100" label="流水号" prop="serialNo"/>-->
      <!--<el-table-column align="center" min-width="100" label="凭证号" prop="voucherNo"/>-->
      <el-table-column align="center" min-width="150" label="交易订单号" prop="orderNo"/>
      <el-table-column align="center" min-width="120" label="交易时间" prop="tradeTime"/>
      <el-table-column align="center" min-width="100" label="收付方向" prop="payRecv">
        <template slot-scope="scope">
          <el-tag>{{{"0":"收款","1":"付款"}[scope.row.payRecv]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="100" label="币种" prop="currency"/>
      <el-table-column align="center" min-width="200" label="金额(元)" prop="money"/>
      <el-table-column align="center" min-width="100" label="收款账号" prop="recvAccount"/>
      <el-table-column align="center" min-width="110" label="收款户名" prop="recvAccountName"/>
      <!--<el-table-column align="center" min-width="110" label="收款联行号" prop="recvBankNo"/>-->
      <el-table-column align="center" min-width="200" label="收款银行名称" prop="recvBankName"/>
      <el-table-column align="center" min-width="100" label="付款账号" prop="payAccount"/>
      <el-table-column align="center" min-width="200" label="付款户名" prop="payAccountName"/>
      <!--<el-table-column align="center" min-width="200" label="付款联行号" prop="payBankNo"/>-->
      <el-table-column align="center" min-width="200" label="付款银行名称" prop="payBankName"/>
      <!--<el-table-column align="center" min-width="200" label="用途" prop="usage"/>
      <el-table-column align="center" min-width="170" label="摘要" prop="abstract"/>
      <el-table-column align="center" min-width="170" label="附言" prop="postscript"/>-->
      <el-table-column fixed="right" align="center" min-width="170" label="支付结果" prop="payResult">
        <template slot-scope="scope">
          <el-tag>{{{"0":"正在处理","1":"成功","2":"失败"}[scope.row.payResult]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" min-width="170" label="结果原因" prop="reason"/>
    </el-table>
    <!--<pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
                @pagination="getList"/>-->
  </div>
</template>

<script>
  import {doGet, doPost} from '@/api'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

  export default {
    name: "bankserial",
    components: {Pagination},

    data() {
      return {
        list: [],
        accounts: [],
        listLoading: false,
        total: 0,
        listQuery: {
            pageNum: 1,
            pageSize: 20,
        },
        editForm: {
          account: undefined,
          endDate: undefined,
          startDate: undefined,
          payRecv: undefined
        },
        editFormRules: {
          account: [{required: true, message: '账户号不允许为空', trigger: 'blur'}],
          endDate: [{required: true, message: '请选择查询结束日期', trigger: 'blur'}],
          startDate: [{required: true, message: '请选择查询起始日期', trigger: 'blur'}]
        },
      }
    },
    created() {
       this.getAccounts()
    },

    methods: {
      getAccounts() {
        doGet('account.html?op=list', {}).then(response => {
           this.accounts = response.rows
         }).catch(() => {
           this.accounts = []
         })
      },
      // 获取余额列表
      getList() {
        this.listLoading = true
        let setData = {
          ...this.editForm,
          ...this.listQuery,
          account: this.editForm.account,
        }
        doGet('bankserial.html?op=search', setData).then(response => {
          this.list = response.rows
          this.total = response.rows.length
          this.listLoading = false
        }).catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
      },

      // 查询余额
      doQuery() {
        this.$refs['editForm'].validate(valid => {
          if (valid) {
            this.getList()
          }
        })
      }
    }
  }
</script>

<style scoped>
  .el-table thead {
    color: #333;
  }
</style>
